<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="my-sticky-element" style="height: 200px;">55555555555555555555555555555555</div>
		<style type="text/css">
			.active {
				background-color: #307FB5;
			}
		</style>
		<form class="move" style="position: fixed;">
			<fieldset>
				<p id="high1">One</p>
				<p id="high2">Two</p>
				<p id="high3">Three</p>
				<p id="high4">Four</p>
			</fieldset>
		</form>
		<div class="spacer s1" id="sec1">
			<div class="box2" style="background-color: #8DBBE0;">
				<p>One</p>
				<a href="#" class="viewsource">view source</a>
			</div>
		</div>
		<div class="spacer s1" id="sec2">
			<div class="box2" style="background-color: #6AA6D8;">
				<p>Two</p>
				<a href="#" class="viewsource">view source</a>
			</div>
		</div>
		<div class="spacer s1" id="sec3">
			<div class="box2" style="background-color: #4E96D1;">
				<p>Three</p>
				<a href="#" class="viewsource">view source</a>
			</div>
		</div>
		<div class="spacer s1" id="sec4">
			<div class="box2" style="background-color: #307FB5;">
				<p>Four</p>
				<a href="#" class="viewsource">view source</a>
			</div>
		</div>
		<div class="spacer s2"></div>
		
	</body>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.0/ScrollMagic.min.js" type="text/javascript" charset="utf-8"></script>
	
	<script src="http://scrollmagic.io/scrollmagic/uncompressed/plugins/debug.addIndicators.js" type="text/javascript" charset="utf-8"></script>

	<script>
		// init controller
		var controller = new ScrollMagic.Controller({globalSceneOptions: {duration: 200,offset: 50}});
	
		// build scenes
		new ScrollMagic.Scene({triggerElement: "#sec1"})
						.setClassToggle("#high1", "active") // add class toggle
						.addIndicators() // add indicators (requires plugin)
						.addTo(controller);
		new ScrollMagic.Scene({triggerElement: "#sec2"})
						.setClassToggle("#high2", "active") // add class toggle
						.addIndicators() // add indicators (requires plugin)
						.addTo(controller);
		new ScrollMagic.Scene({triggerElement: "#sec3"})
						.setClassToggle("#high3", "active") // add class toggle
						.addIndicators() // add indicators (requires plugin)
						.addTo(controller);
		new ScrollMagic.Scene({triggerElement: "#sec4"})
						.setClassToggle("#high4", "active") // add class toggle
						.addIndicators() // add indicators (requires plugin)
						.addTo(controller);

	</script>
</html>
